<template>
  <div class="movie-detail" v-if="movieDetail">
    <div class="detail-top">
      <div class="detail-top-bg" v-if="movieImage" :style="{backgroundImage: 'url('+movieImage+')'}"></div>
      <div class="movie-mask"></div>
      <div class="detail-top-content">
        <div class="detail-top-image">
          <img :src="movieImage" alt="">
        </div>
        <div style="font-size: 11px;">
          <div class="movie-name">{{movieDetail.nm}}</div>
          <div class="movie-enname">{{movieDetail.enm}}</div>
          <div v-if="movieDetail.globalReleased || movieDetail.scoreLabel === '猫眼购票评分'" style="margin: 8px 0;">
            <van-rate v-if="movieDetail.sc > 0" v-model="value" allow-half void-icon="star" void-color="#eee" color="#ffd21e" :size="15" readonly></van-rate>
            <span v-if="movieDetail.sc > 0"> ({{pingJiaNum}}万人评)</span>
            <div  v-if="movieDetail.sc === 0">暂无评分</div>
          </div>
          <div v-if="!movieDetail.globalReleased && movieDetail.scoreLabel === '猫眼点映评分'">
            <span class="dianying-label">点映评分 </span>
            <span style="color: #ffc600;font-size: 18px;">{{movieDetail.sc}}</span>
            <span> ({{pingJiaNum}}万人评)</span>
          </div>
          <!-- 如果不存在猫眼点映评分，则字体加粗变颜色 -->
          <div :class="{wishLookColor: movieDetail.scoreLabel !== '猫眼点映评分'}" style="margin: 4px 0;" v-if="(!movieDetail.globalReleased && movieDetail.sc === 0) || (!movieDetail.globalReleased && movieDetail.scoreLabel === '猫眼点映评分')">{{movieDetail.wish}}人想看</div>
          <div>{{movieDetail.cat}}</div>
          <div style="margin: 4px 0;">{{movieDetail.src}}/{{movieDetail.episodeDur}}分钟</div>
          <div>{{movieDetail.pubDesc}}</div>
        </div>
      </div>
    </div>
    <div class="plot-box">
      <div class="plot-title">剧情介绍</div>
      <div :style="{height: isFlod ? 'auto' : '60px', overflow: 'hidden', fontSize: '15px', lineHeight: '1.42'}">{{movieDetail.dra}}</div>
      <div class="is-flod" @click="isFlodHandel">
        <van-icon v-if="!isFlod" name="arrow-down" color="#aaa" />
        <van-icon v-else name="arrow-up" color="#aaa" />
      </div>
    </div>
    <DividerBox />
    <div class="actor-box">
      <div class="plot-title">演职人员</div>
      <div class="no-data">暂无数据...</div>
    </div>
    <DividerBox />
    <div class="media-box">
      <div class="plot-title">视频和剧照</div>
      <scroll-view scroll-x class="scroll-view_H">
        <div class="image-box">
          <img class="video-image" :src="movieDetail.videoImg" alt="" @click="goToVideo">
          <img class="plot-image" v-for="(item, index) in plotImages" :key="index" :src="item" alt="" @click="previewImage(item)">
        </div>
      </scroll-view>

    </div>
    <DividerBox />
    <div>暂无评论</div>
  </div>
</template>

<script>
import request from '../../utils/request';
import DividerBox from '../../components/dividerBox.vue'
export default {
  data () {
    return {
      movieDetail: null,
      movieId: '',
      movieImage: '',
      value: 0, // 星星评分标准
      pingJiaNum: 0,
      isFlod: false, //展开收起标志符
      plotImages: []
    }
  },
  onLoad(option) {
    // 获取页面跳转传参
    this.movieId = option.id;
    this.getMovieDetail()
    this.getComment()
  },
  components: {
    DividerBox
  },
  methods: {
    // 获取电影详情
    async getMovieDetail() {
      try {
        let res = await request({
          api: `/ajax/detailmovie?movieId=${this.movieId}`
        })
        console.log(res);
        this.movieDetail = res[0].detailMovie;
        this.movieImage = res[0].detailMovie.img.replace("w.h/", "");
        this.value = (res[0].detailMovie.sc / 2).toFixed(1);
        this.pingJiaNum = (res[0].detailMovie.snum / 10000).toFixed(1);
        this.plotImages = res[0].detailMovie.photos.map((item) => {
          return item.replace("w.h/", "");
        });
      } catch (error) {
        console.log(error);
      }
    },
    // 获取观众评论列表
    async getComment() {
      console.log(534234235345);
      try {
        let res = await request({
          api: `/mmdb/comments/movie/${this.movieId}.json?_v_=yes&offset=0`,
        })
        console.log(res, '12121212');
      } catch (error) {
        console.log(error);
      }
    },
    // 展开收起
    isFlodHandel() {
      this.isFlod = !this.isFlod
    },
    // 图片预览，调用小程序方法
    previewImage(data) {
      wx.previewImage({
        urls: this.plotImages,
        current: data
      })
    },
    // 查看视频
    goToVideo() {
      console.log(this.movieDetail);
      let params = JSON.stringify({
        video: {
          url: this.movieDetail.videourl,
          img: this.movieDetail.videoImg,
          name: this.movieDetail.videoName
        },
        movieName: this.movieDetail.nm,
        id: this.movieDetail.id,//电影ID
        version: this.movieDetail.version, //电影类型（3d、IMAX）
        release: this.movieDetail.pubDesc, //上映时间
        rt: this.movieDetail.rt,//电影上映时间
        wish: this.movieDetail.wish, //想看的人数
        globalReleased: this.movieDetail.globalReleased, //是否上映
        sc: this.movieDetail.sc, //评分
        showst: this.movieDetail.showst//判读“想看”、“预售”
      })
      wx.navigateTo({ url: `../videoPage/main?params=${params}` });
    }
  }
}
</script>

<style lang="less" scoped>
.movie-detail {
  width: 100%;
  .detail-top {
    position: relative;
    filter: blur(0);
    overflow: hidden;
    padding: 30rpx;
    box-sizing: border-box;
    width: 100%;
    height: 366rpx;
    .detail-top-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: cover;
      background-repeat: no-repeat;
      filter: blur(30rpx);
      z-index: -1;
    }
    .detail-top-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      color: #f0f2f3;
      .detail-top-image {
        width: 214rpx;
        height: 300rpx;
        border: 2rpx solid #f0f2f3;
        margin-right: 30rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .plot-box {
    padding: 30rpx;
    padding-top: 20rpx;
  }
  .actor-box {
    padding: 30rpx;
    padding-top: 20rpx;
  }
  .media-box {
    padding: 30rpx;
    padding-top: 20px;
    .image-box {
      display: flex;
      align-items: center;
      .video-image {
        width: 330rpx;
        height: 180rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
      }
      .plot-image {
        width: 240rpx;
        height: 180rpx;
        flex-shrink: 0;
        margin-right: 16rpx;
      }
    }
  }
}
.plot-title {
  font-size: 32rpx;
  color: #444;
  margin-bottom: 12rpx;
}
.movie-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #fff;
}
.movie-enname {
  color: #fff;
  margin-bottom: 12rpx;
  font-size: 22rpx;
}
.movie-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #40454e;
  opacity: .55;
  z-index: -1;
}
.wishLookColor {
  color: #ffc600;
  font-size: 36rpx;
}
.line-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.dianying-label {
  color: #ffc600;
  font-size: 28rpx;
}
.is-flod {
  text-align: center;
  margin-top: 12rpx;
}
.no-data {
  font-size: 30rpx;
}
.scroll-view_H{
  white-space: nowrap;
}
</style>